// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.header-nav-v4 {
  @_top: header-nav-v4;
  @header-nav-gap: 10px;
  --header-nav-item-padding-y: 10px;

  list-style: none;
  display: none;
  flex-wrap: wrap;
  gap: @header-nav-gap;
  margin: 0;
  padding: 0;
  font-size: @font-size--normal;
  position: relative;

  @media @desktop {
    --header-nav-item-padding-y: 15px;
    font-size: @font-size--title-small;
    display: flex;
  }

  &--breadcrumb {
    display: flex;
  }

  &--list {
    gap: 20px;

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: hsl(var(--hsl-h1));
    }
  }

  &__item {
    display: flex; // remove space between ::before and content
    align-items: baseline;

    .@{_top}--breadcrumb & + &::before {
      .fas();
      content: @fa-var-angle-right;

      padding-right: @header-nav-gap;
    }
  }

  &__link {
    align-items: baseline;
    display: flex;
    gap: 2px 5px;
    padding: var(--header-nav-item-padding-y) 0;
    position: relative;

    &::before {
      display: none;
      transform: scaleY(0);
    }

    @media @desktop {
      &::before {
        content: "";
        position: absolute;
        bottom: -2px;
        height: 5px;
        width: 100%;
        border-radius: 10000px;
        background-color: hsl(var(--hsl-h1));
        z-index: @z-index--header-nav-v4-active;
        transition: inherit;
        display: block;
      }
    }

    &--active {
      .link-white();
      .link-plain();
    }

    .@{_top}--list & {
      .link-plain();

      &:hover::before {
        transform: scaleY(1);
      }

      &--active {
        font-weight: bold;

        &::before {
          transform: scaleY(1);
        }
      }
    }
  }

  &__text {
    padding: var(--header-nav-item-padding-y) 0;
  }
}
